<template>
<div>
    <ul>
        <li v-for="(item, index) in days" :key="index">{{item.title}}:{{item.value}}</li>
    </ul>
    <button @click="test">TEST</button>
    <button @click="timetest">TEST2</button>

    <div class="sliderDays">
        <div class="sliderDaysItem" v-for="(item, index) in weakCol" :key="index">{{item}}</div>
    </div>
</div>
</template>

<script>
var dayjs = require('dayjs') // https://github.com/iamkun/dayjs/blob/1ac9e1e759c3fcb8aa567902c516409b2b86347e/docs/zh-cn/API-reference.md#天数-月
export default {
    data(){
        return {
            daysInMonth: [],
            days: [],
            cardsTotal: [],
            weakCol:['一','二','三','四','五','六','日']

        }
    },
    methods:{
        
        // 获取当前月份数组
        timetest(){
            const startDateInMonth = dayjs().startOf('month')
            const endDateInMonth = dayjs().endOf('month')
            const currentDateInMonth = dayjs()

            this.cardsTotal.push(startDateInMonth.format('MM-DD-dddd'))
            for (let index = 1; index < endDateInMonth.date(); index++) {
                let tmp = startDateInMonth.add(index,"day")
                if (tmp.isSame(currentDateInMonth,"year") && tmp.isSame(currentDateInMonth,"month") && tmp.isSame(currentDateInMonth,"day")) {
                    console.log('当天')
                }
                this.cardsTotal.push(tmp.format('MM-DD-dddd'))
            }
        },
        test(){
            const date1 = dayjs('2019-01-26')
            const date2 = dayjs('2019-01-25')
            const date3 = date1.add(date1.diff(date2, 'day'),'day')

            this.days = [
                {title:'获取年份', value: dayjs().year()},
                {title:'获取月份。从 0 开始', value: dayjs().month()},
                {title:'获取日期。从 1 开始', value: dayjs().date()},
                {title:'获取星期。从星期天 0 开始', value: dayjs().day()},
                {title:'获取小时', value: dayjs().hour()},
                {title:'获取分钟', value: dayjs().minute()},
                {title:'获取秒', value: dayjs().second()},
                {title:'获取毫秒', value: dayjs().millisecond()},
                {title:'返回当前月份的第一天', value: dayjs().startOf('month')},
                {title:'返回当前月份的最后一天', value: dayjs().endOf('month')},
                {title:'返回当前周的第一天', value: dayjs().startOf('week')},
                {title:'返回当前周的最后一天', value: dayjs().endOf('week')},
                
                {title:'2019-01-25', value: date1.toString()},
                {title:'2018-06-05', value: date2.toString()},
                {title:'2019-01-25', value: date1.toDate().toString()},
                {title:'2018-06-05', value: date2.toDate().toString()},
                {title:'2019-01-25和2018-06-05相差毫秒', value: date1.diff(date2)},
                {title:'2019-01-25和2018-06-05相差毫秒', value: date1.diff(date2)},
                {title:'2019-01-25和2018-06-05相差月', value: date1.diff(date2, 'month')},
                {title:'2019-01-25和2018-06-05相差月', value: date1.diff(date2, 'month', true)},
                {title:'2019-01-25和2018-06-05相差天', value: date1.diff(date2, 'day')},
                {title:'2019-01-25和2018-06-05相差天', value: date3.toDate()},
                {title:'返回月份的天数', value: dayjs().daysInMonth()},
                {title:'返回 ISO8601 格式的JSON字符串', value: dayjs().toJSON()},
                {title:'返回 ISO8601 格式的JSON字符串', value: dayjs().toISOString()}
            ]
        }
    }
}
</script>

<style>
.sliderDays {
    display: flex;
    flex-flow: wrap;
    align-content: center;
    justify-content: space-around;
}

.sliderDaysItem {
    border: 1px solid #c3c3c3;
    align-items: center;
}
</style>
